<template>
    <my-page ref="myPageDom" @up="myPage_UpEvent">
        <div class="messageList-root">
            <div class="messageList-filter"></div>
            <div class="messageList-border" @scroll="content_ScrollEvent">
                <!-- 这个地方高度为0,仅起到占位作用 -->
                <div class="message-input" v-if="inputData.isShow"
                    :style="'height:' + (inputData.height) + 'px;transition-duration:' + (inputData.duration) + 's;'">
                    <myMessageInput @clear="messageInput_ClearEvent" @load="messageLoad_LoadEvent"></myMessageInput>
                </div>
                <div ref="messageContentDom" class="message-content">
                    <TransitionGroup :css="false" @enter="messageItem_EnterEvent" @leave="messageItem_LeaveEvent">
                        <div v-for="(item, index) in messageData" :key="index" class="content-item">
                            <myItem :curData="item" @delItem="itemDel_DelEvent"></myItem>
                        </div>
                    </TransitionGroup>
                </div>
            </div>
        </div>
    </my-page>
</template>

<script setup>
import { useUserStores } from "@/stores/index.js";
import myMessageInput from "./messageInput/index.vue";
import { getMessageList_API } from "@/axios/api/other.js"
import { onBeforeUnmount, onMounted } from "vue";
import myItem from "./item/index.vue";
import gsap from 'gsap';

const userStores = useUserStores();
let config = userStores.getConfigAction();
const backImage = 'url("' + config.backImage + '")';

const myPageDom = ref();
const inputData = ref({
    height: 0,
    duration: 0,
    isShow: false,//开始展开
    isEnd: false,//展开结束
});
const pageData = {
    page: 0,
    pageCount: 20,
};
const messageData = ref([]);
let messageDataIndex = 0;


onMounted(() => {
    //绑定
    myPageDom.value.loadTouchend('Up', loadMessageBox);
    loadMessageList(1);
});

onBeforeUnmount(() => {
    //卸载
    myPageDom.value.unloadTouchend('Up');
});

//#region item
const itemDel_DelEvent = (id) => {
    messageData.value = messageData.value.filter(u => u.id != id);
}

const messageItem_EnterEvent = (el, done) => {
    gsap.to(el, {
        delay: messageDataIndex * 0.03,
        marginLeft: 10,
        duration: 0.3,
        opacity: 1,
        onComplete: done,
    });
    messageDataIndex += 1;
}

const messageItem_LeaveEvent = (el, done) => {
    gsap.to(el, {
        opacity: 0,
        height: 0,
        delay: el.dataset.index * 0.15,
        onComplete: done
    })
}
//#endregion

const messageContentDom = ref();
const content_ScrollEvent = (e) => {
    const height = messageContentDom.value.clientHeight;
    const cur = e.target;
    if (pageData.page < pageData.allPageCount) {
        if (cur.scrollTop + height + 20 > cur.scrollHeight) {
            loadMessageList(pageData.page + 1);
        }
    }
}

const loadMessageList = (page = 1) => {
    const { pageCount } = pageData;
    if (page == 1)
        loading.show();
    getMessageList_API({
        page: page,
        pageCount: pageCount,
    }).then(res => {
        console.log(res)
        messageDataIndex = 0;
        if (res.data.statusCode == 0) {
            pageData.allPageCount = res.data.result.page.allPageCount;
            pageData.page = page;
            if (page == 1) {
                messageData.value = res.data.result.data;
            } else {
                messageData.value.push(...res.data.result.data);
            }

            userStores.updateMessageLookIdAction(messageData.value[0].id);

            for (let i = 0; i < messageData.value.length; i++) {
                const id = messageData.value[i].id;
                if (config.messageList.find(u => u == id)) {
                    messageData.value[i].isDel = 1;
                }
            }
        }
        //记录最新的

    }).catch(res => {
        console.log(res);
    }).finally(() => {
        loading.hide();
    })
}

//#region 这里是控制ShowInputHeight
const messageInput_ClearEvent = () => {
    inputData.value.height = 0;
    setTimeout(() => {
        inputData.value.isShow = false;
        inputData.value.isEnd = false;
    }, 500);
}

const messageLoad_LoadEvent = (data) => {
    data.isDel = 1;
    messageData.value.splice(0, 0, data);
}

const loadMessageBox = () => {
    const { isEnd } = inputData.value;
    if (!isEnd) {
        if (inputData.value.height < 50) {
            inputData.value.height = 0;
            inputData.value.duration = 0.3;
        } else {
            inputData.value.isEnd = true;
            inputData.value.height = window.innerHeight / 2;
            inputData.value.duration = 0.3;
        }
    }
}

const myPage_UpEvent = (y) => {
    inputData.value.isShow = true;
    const { isEnd } = inputData.value;
    if (!isEnd) {
        if (y / 2 > window.innerHeight / 2) {
            inputData.value.height = window.innerHeight / 2;
        } else {
            inputData.value.duration = 0;
            inputData.value.height = y / 2;
        }
        if (y / 2 > 50) {
            //已经可以放手了
            //改变css
        }
    }
}
//#endregion

</script>

<style lang="scss" scoped>
.messageList-root {
    width: 100%;
    height: calc(100%);
    background-image: v-bind(backImage);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

    .messageList-filter {
        backdrop-filter: blur(10px);
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
    }

    .messageList-border {
        width: 100%;
        height: calc(100% - 1px);
        display: grid;
        grid-template-rows: 0px 1fr;
        overflow-y: auto;
        position: absolute;

        .message-input {
            width: 90%;
            grid-row: 1;
            position: fixed;
            // background: red;
            margin-top: 25%;
            margin-left: 5%;
            border-radius: 7px;
            overflow: hidden;
        }

        .message-content {
            grid-row: 2;
            padding-bottom: 10px;
            // height: 100%;
            // overflow-y: auto;
            // transition-duration: 0.3s;

            .content-item {
                margin-top: 10px;
                background-image: v-bind(backImage);
                background-attachment: fixed;
                background-size: cover;
                background-position: center;
                width: calc(100% - 20px);
                border-radius: 7px;
                overflow: hidden;
                margin-left: 50px;
                opacity: 0;
            }
        }
    }
}
</style>